<template>
	<view class="SwitchPatient">
		<view class="SwitchPatients" v-if="Data.listData?Data.listData.length:0" @click="SwitchPatientShowFu">
			<view class="SwitchPatientsDeta">
				<view>
					<text>{{ Data.showData.name }}</text>
					<text>{{ Data.showData.relationType }}</text>
				</view>
				<view>
					<text>{{ Data.showData.cardNum }}</text>
				</view>
			</view>
			<view class="SwitchPatientsBtn">
				<view class="iconfont icon-qiehuan"></view>
				<text>切换就诊人</text>
			</view>
		</view>
		<view class="SwitchPatients" v-else>
			<text>暂无就诊人</text>
		</view>
		<CardBalance v-if="balance" :money="Data.showData.money"></CardBalance>
		<uni-popup ref="popup" background-color="transparent" type="bottom">
			<view class="SwitchPatientPopup">
				<view class="pageContainerHeader"><text>选择就诊人</text></view>
				<view class="SwitchPatients" v-for="v in Data.listData" :key="v.cardNum" @click="selectList(v)">
					<view class="SwitchPatientsDeta">
						<view>
							<text>{{ v.name }}</text>
							<text>{{ v.relationType }}</text>
						</view>
						<view>
							<text>{{ v.cardNum }}</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- <page-container :show="data.SwitchPatientShow" round close-on-slide-down @afterleave="afterleave"
			:custom-style="'height:50%;display:flex;flex-direction: column;align-items: center;'">
			<view class="pageContainerHeader">
				<text>选择就诊人</text>
			</view>
			<view class="SwitchPatients">
				<view class="SwitchPatientsDeta">
					<view>
						<text>将就</text>
						<text>本人</text>
					</view>
					<view>
						<text>23423432423</text>
					</view>
				</view>
			</view>
		</page-container> -->
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted
	} from 'vue'
	import CardBalance from '@/pages/selfPayment/rechargeRecord/CardBalance.vue'
	import {
		patientList
	} from '@/api/TopUpService'
	import {
		useTopStore
	} from '@/store/TopUpService.js'
	const topStore = useTopStore();
	const Data = reactive({
		showData: {

		},
		listData: []
	})

	const props = defineProps({
		fun: Function,
		balance: false,
		id: 0
	})
	const selectList = (v) => {
		Data.showData = v;
		popup.value.close();
		props.fun && props.fun(v)
	}
	const patientListFn = (id) => {
		patientList({
				id
			})
			.then(({
				data
			}) => {
				if (data.msg == 'success') {
					Data.listData = data.data
					Data.listData.forEach(v => {
						switch (v.relationType) {
							case 0:
								v.relationType = '本人'
								break
							case 1:
								v.relationType = '子女'
								break
							case 2:
								v.relationType = '夫妻'
								break
							case 3:
								v.relationType = '父母'
								break
							case 4:
								v.relationType = '朋友'
								break
						}
						try {
							if (!props.id) {
								if (v.status == 0) {
									selectList(v)
									return;
								}
							} else {
								if (props.id == v.id) {
									selectList(v);
									return
								}
							}
						} catch (e) {
							//TODO handle the exception
							console.log(e)
						}
					})
				}
			})
			.catch(err => {
				console.log(err)
			})
	}

	let popup = ref(null)
	let SwitchPatientShowFu = () => {
		popup.value.open('bottom')
	}
	onMounted(() => {
		patientListFn(topStore.userId)
	})
	// let afterleave = () => {
	// 	data.SwitchPatientShow = false
	// }
</script>

<style lang="less" scoped>
	.SwitchPatient {
		.SwitchPatients {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 688rpx;
			height: 178rpx;
			background-color: #f3f8fe;
			border-radius: 10rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			margin: 20rpx auto;

			.SwitchPatientsDeta {
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				&>view:nth-child(1) {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 32rpx;
					font-weight: 600;
					color: #555555;
					margin: 20rpx 0;

					&>text:nth-child(2) {
						font-size: 26rpx;
						margin: 0 20rpx;
						display: inline-block;
						text-align: center;
						height: 36rpx;
						line-height: 36rpx;
						width: 90rpx;
						font-weight: 500;
						border-radius: 50rpx;
						background-color: #e1ecfe;
						color: #016eff;
					}
				}

				&>view:nth-child(2) {
					font-size: 26rpx;
					color: #acacac;
				}
			}

			.SwitchPatientsBtn {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				&>view {
					width: 40rpx;
					height: 40rpx;
					margin: 10rpx 0;
					border-radius: 50%;
					background-color: #006eff;
				}

				.iconfont {
					font-size: 40rpx;
					color: #fff;
				}

				&>text {
					font-size: 26rpx;
				}
			}
		}

		.pageContainerHeader {
			height: 100rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: 600;
			font-size: 40rpx;
		}

		.SwitchPatientPopup {
			height: 50vh;
			width: 100%;
			background-color: #fff;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			overflow-y: scroll;
		}

		.SwitchPatientPopup::-webkit-scrollbar {
			height: 0;
			width: 0;
		}
	}
</style>
